<template>
    <div class="bigbox">
        <ETable :delelteAll="deleHouseAll" :delelte="deleHouse" :columns="columns"  :loadData="getHouse"  :isPage="true" :pageSize="[10,20,30]" ref="table" >
  
          <template #search="{params , search , reset}">
            <el-form :inline="true" class="demo-form-inline"> 
              <el-form-item label="房间号:">
                <el-input v-model="params.name" placeholder="请输入房间号" clearable />
              </el-form-item>
              <el-form-item label="楼栋:">
                <el-input v-model="params.buildingName" placeholder="请输入楼栋" clearable />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>

          <template #buttons="{delAll}">
            <el-button type="success" @click="add">新增房间</el-button>
            <el-button type="danger" @click="delAll">批量删除 </el-button>
          </template>

          <template #operation="{row,del}">
        
            <el-button type="primary">编辑</el-button>
            <el-button type="danger" @click="del(row.id)">删除 </el-button>
            <!-- <el-button type="danger" @click="del(row.id)">删除</el-button> -->
          </template>
          
          <template #photo="{row}">

        <el-image
          style="width: 50px; height: 50px"
          :src="imgUrl+row.photo"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[imgUrl+row.photo]"
          :initial-index="4"
          fit="cover"
          preview-teleported
        />
      </template>
     
        </ETable>
        <el-dialog v-model="open" title="添加部门">
          <el-form>
              <el-form-item label="房间号码">
                  <el-input v-model="form.name"  placeholder="请输入房间号"></el-input>
              </el-form-item>
              <el-form-item label="房间类型">
                  <el-input v-model="form.typeName"  placeholder="请输入房间类型"></el-input>
              </el-form-item>
              <el-form-item label="所属楼层">
                  <el-input v-model="form.buildingName"  placeholder="请输入所属楼层"></el-input>
              </el-form-item>
              <el-form-item label="床位数量">
                  <el-input v-model="form.beds"  placeholder="请输入床位数"></el-input>
              </el-form-item>
              <el-form-item label="房间图片">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                  <el-icon><Plus /></el-icon>

                  <template #file="{ file }">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleDownload(file)"
                        >
                          <el-icon><Download /></el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <el-icon><Delete /></el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
              </el-form-item>
          </el-form>
          <template #footer>
              <el-button @click="open = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
          </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">

  import  { deleHouse, getHouse,deleHouseAll ,addHouse} from '../../apis/House/House';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref, useTemplateRef} from 'vue';

  import { ElMessage, type UploadFile } from 'element-plus'

  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const disabled = ref(false)

  const handleRemove = (file: UploadFile) => {
    console.log(file)
  }

  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!
    dialogVisible.value = true
  }

  const handleDownload = (file: UploadFile) => {
    console.log(file)
  }

  const table=useTemplateRef('table')
  const form=reactive({
    id:0,
    buildingId: 0,
    buildingName:'',
    type: 0,
    typeName: '',
    name: '',
    beds: 0,
    picture: '',
})
  const submit=()=>{
    addHouse(form).then(res=>{
    console.log(res);
    ElMessage('添加成功')
    table.value!.getData()
  })
  open.value=false
  form.name=''
  form.beds=0
  form.type=0
}


const imgUrl =import.meta.env.VITE_IMG_URL;

const open=ref(false)
const add=()=>{
  open.value=true
}


  const columns= reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '110',
  },
  {
    prop: 'name',
    label: '房间号',
    width: '110',
  },
  {
    prop: 'buildingName',
    label: '楼层',
    width: '110',
  },
  {
    prop: 'beds',
    label: '床位',
    width: '110',
  },
  {
    prop: 'addTime',
    label: '创建时间',
    width: '200',
  },
  {
    prop: 'addAccountName',
    label: '创建人',
    width: '200',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
  ])
  
  </script>
  
  <style scoped>
  .search_top2{
    margin-left: 10px;
    margin-top: 10px;
  }
  .search_top{
    width: 200px;
    display: inline-block;
  }
  .search{
    width: 100%;
    height: 100px;
    background-color: #fff;
    overflow: hidden;
  }
/* .bigbox{
  background-color: #fff;
  padding: 10px;
  margin-top: 20px;
} */
  </style>